<template >
    <div>
        <div class="top">
            <div class="">
                <span class="demonstration">活动时间</span>
                <el-date-picker v-model="value1" type="datetime" placeholder="开始时间" class="statr">
                </el-date-picker>
                <el-date-picker v-model="value2" type="datetime" placeholder="结束时间">
                </el-date-picker>
                <el-button type="primary" class="search" @click="search">搜索</el-button>
            </div>


            <el-button type="primary" class="add" @click="add">添加</el-button>
        </div>
        <!-- 表格 -->

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed type="index" lable="序号">
            </el-table-column>
            <el-table-column prop="date" label="日期">
            </el-table-column>
            <el-table-column prop="type" label="收支类型">
            </el-table-column>
            <el-table-column prop="describe" label="收支描述">
            </el-table-column>
            <el-table-column prop="income" label="收入">
            </el-table-column>
            <el-table-column prop="expend" label="支出">
            </el-table-column>
            <el-table-column prop="remark" label="描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="warning" size="small">删除</el-button>
                    <el-button type="danger" size="small">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 模态框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="收支类型" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择收支类型">
                        <el-option label="提现" value="提现"></el-option>
                        <el-option label="提现手续费" value="提现手续费"></el-option>
                        <el-option label="充值" value="充值,"></el-option>
                        <el-option label="优惠券" value="优惠券"></el-option>
                        <el-option label="充值礼卷" value="充值礼卷"></el-option>
                        <el-option label="转账" value="转账"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="收支描述" prop="describe">
                    <el-input v-model="ruleForm.describe"></el-input>
                </el-form-item>

                <el-form-item label="收入" prop="income">
                    <el-input v-model="ruleForm.income"></el-input>
                </el-form-item>

                <el-form-item label="支出" prop="expend">
                    <el-input v-model="ruleForm.expend"></el-input>
                </el-form-item>

                <el-form-item label="账户现金" prop="money">
                    <el-input v-model="ruleForm.money"></el-input>
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addok">确 定</el-button>
            </div>
        </el-dialog>



    </div>
</template>
<script>
import { getName,getadd } from "../api/api"
export default {
    data() {
        return {

            tableData: [],
            // 时间 
            value1: "",
            value2: "",
            goods: [],
            dialogFormVisible: false,
            ruleForm: {
                describe: "000",
                remark: "4545",
                expend: "5454",
                income: "6465",
                type: "管理员",
            },
            rules: {
                remark: { required: true, message: '请输收支描述', trigger: 'blur' },
                expend: { required: true, message: '收入', trigger: 'blur' },
                income: { required: true, message: '支出', trigger: 'blur' },
                money: { required: true, message: '账户现金', trigger: 'blur' },

            },
            thistable: [],
        }
    },
    methods: {
        // 搜索
        search() {

        },
        //请求数据
        getRequestrian() {
            getName().then(res => {
                console.log(res);
                this.tableData = res
            })
        },
        // 修改 
        xg() {

        },
        // 删除 
        del() {

        },
        //添加出现模态框
        add() {
            this.dialogFormVisible = true
        },
        //提交 
        addok() {
            this.dialogFormVisible = false
        },

    },
    created() {
        getadd({...this.ruleForm}).then(res => {
                console.log(res);
            })
        this.getRequestrian()
    },
}
</script>
<style lang="scss">
.top {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    justify-content: space-between;
    box-sizing: border-box;

    .statr {
        margin: 0 10px;
    }


}

.search {
    margin-left: 5px;
}
</style>